import type { FC } from 'react';
import { memo } from 'react';
import { Line, Group } from 'react-konva';
import { CanvasSize } from '../types';

export type GridProps = CanvasSize & {
  row: number;
  col: number;
  cellSize: number;
  unit: number;
}

const Grid: FC<GridProps> = (props) => {
  const {
    rows,
    cols,
    unit = 5,
    cellSize,
  } = props;

  const x = props.col - 1;
  const y = props.row - 1;

  return (
    <Group
      width={cellSize}
      height={cellSize}
    >
      <Line
        strokeWidth={1}
        x={x * cellSize}
        y={y * cellSize}
        points={[0, 0, 0, cellSize]}
        stroke={x % unit ? '#ccc' : '#f40'}
      />
      <Line
        strokeWidth={1}
        y={y * cellSize}
        x={x * cellSize}
        points={[0, 0, cellSize, 0]}
        stroke={y % unit ? '#ccc' : '#f40'}
      />
      {x + 1 === cols && (
        <Line
          strokeWidth={1}
          x={(x + 1) * cellSize}
          y={y * cellSize}
          points={[0, 0, 0, cellSize]}
          stroke='#f40'
        />
      )}
      {y + 1 === rows && (
        <Line
          strokeWidth={1}
          y={(y + 1) * cellSize}
          x={x * cellSize}
          points={[0, 0, cellSize, 0]}
          stroke='#f40'
        />
      )}
    </Group>
  );
};

export default memo(Grid);